<template>
    <div>
        <van-nav-bar title="登入" style="background-color: #FFD85F;" class="headera">

        </van-nav-bar>

        <div class="login-page">


            <div class="login-container">
                <van-image class="login-logo"
                    src="http://localhost:8081/wx/storage/fetch/275481e6-cb81-47aa-b0bf-320b06ca1b07.png" width="150"
                    height="100" round />

                <h2 class="login-title">欢迎回来</h2>

                <van-field v-model="loginForm.username" placeholder="请输入用户名" left-icon="user-o" clearable
                    :label-width="0" />
                <van-field v-model="loginForm.password" type="password" placeholder="请输入密码" left-icon="user-circle-o"
                    clearable :label-width="0" />


                <van-button class="login-button" type="primary" block round @click="handleLogin">登录</van-button>

                <div class="login-footer">
                    <span class="login-link" @click="handleForgotPassword">忘记密码？</span>
                    <span class="login-link" @click="handleRegister">注册新用户</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { NavBar, Image, Field, Button } from 'vant';
export default {
    components: {
        [NavBar.name]: NavBar,
        [Image.name]: Image,
        [Field.name]: Field,
        [Button.name]: Button,
    },
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
            },
        };
    },
    methods: {
        //登入
        handleLogin() {
            const { username, password } = this.loginForm;
            // 表单校验
            if (!username) {
                this.$toast('请输入用户名');
                return;
            }
            if (!password) {
                this.$toast('请输入密码');
                return;
            }
            axios({
                url: "http://localhost:8081/wx/admin/login",
                method: 'post',
                data: {
                    username: this.loginForm.username,
                    password: this.loginForm.password
                }
            }).then(res => {
                console.log(res)
                if (res.data.errno === 0) {
                    localStorage.setItem("userId", res.data.data.adminInfo.userId)
                    localStorage.setItem("token", res.data.data.token)
                    this.$toast('登入成功');
                    this.$router.push({ name: 'Home' });
                } else {
                    this.$toast('用户名或者密码输入错误');
                }

            })
            // this.$router.push({ name: 'Home' });
        },
        handleForgotPassword() {
            this.$toast('忘记密码功能');
        },
        handleRegister() {
            this.$router.push({ name: 'register' });
        },
    },
};
</script>

<style scoped>
.login-page {
    background-color: #FFF7E1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-container {
    background: #FFD85F;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    margin-top: 50px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.login-logo {
    margin-bottom: 20px;
}

.login-title {
    font-size: 1.5em;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.login-button {

    font-weight: bold;
    margin-top: 20px;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.85em;
    color: #555;
}

/* 输入框间距和立体阴影 */
.van-field {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

/* 可选：微调输入框内容区域 */
/* 控制输入文字垂直居中 */
::v-deep(.van-field__control) {
    padding: 14px 0;
    /* 上下内边距一致，确保文字垂直居中 */
    font-size: 16px;
}

/* 控制左侧 icon 垂直居中对齐 */
::v-deep(.van-field__left-icon) {
    display: flex;
    align-items: center;
    height: auto;
    /* 确保随内容高度调整 */
    font-size: 18px;
    padding-left: 4px;
    margin-right: 8px;
    /* 和文字保持间距 */
    color: #666;
}

.login-button:hover {
    transform: translateY(-2px);
    background-color: #f3c543;
}

/* 底部链接 */
.login-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.85em;
    color: #555;
}

.login-link {
    cursor: pointer;
    color: #333;
    text-decoration: underline;
}
</style>